<template>
	<view class="wui-formItem" :style="[customStyle]">
		<view class="formItem-label" :style="[labelWidthComputed, labelPositionComputed]">{{ label }}</view>
		<view class="formItem-slot">
			<slot></slot>
			<view class="input-error-msg" :style="[errorMsgHeightComputed]" :class="[!errorMsg.valid ? 'input-error-msg-show' : 'input-error-msg-hidd']">
				{{ errorMsg.messages }}
			</view>
			<view class="input-error-msg-block" :class="[!errorMsg.valid ? 'input-error-msg-block-show' : 'input-error-msg-block-hidd']" :style="[errorMsgHeightComputed]"></view>
		</view>
	</view>
</template>

<script>
// 校验使用了async-validator
import schema from '../../libs/js/async-validator.js';
schema.warning = function() {};
export default {
	name: 'w-formItem',

	props: {
		prop: {
			type: String
		},
		label: {
			type: String
		},
		labelWidth: {
			type: [String, Number]
		},
		labelPosition: {
			type: String,
			default: ''
		},
		errorMsgHeight: {
			type: String,
			default: '50'
		},
		customStyle: {
			type: Object,
			default() {
				return {
					padding: '20rpx 0'
				};
			}
		}
	},
	data() {
		return {
			errorMsg: {
				messages: '',
				valid: true
			}
		};
	},
	mounted() {
		if (![...this.$wuiUtils.queryParent.call(this, 'w-form').componentsValidateResult].includes(this)) {
			this.$wuiUtils.queryParent.call(this, 'w-form').componentsValidateResult.push(this);
		}
	},
	methods: {
		validate(callback) {
			let parentComponent = this.$wuiUtils.queryParent.call(this, 'w-form');
			let rule = parentComponent.rules[this.prop];
			let model = parentComponent.model[this.prop];
			if (rule) {
				let validator = new schema({
					[this.prop]: rule
				});
				validator.validate(
					{
						[this.prop]: model
					},
					{
						firstFields: true
					},
					(errors, fields) => {
						if (errors) {
							this.errorMsg = {
								messages: errors[0].message,
								valid: false
							};
						} else {
							this.errorMsg = {
								messages: '',
								valid: true
							};
						}
					}
				);
			}
			return callback(this.errorMsg);
		}
	},
	computed: {
		labelWidthComputed() {
			return {
				'--label-width': (this.labelWidth ? uni.upx2px(this.labelWidth) : uni.upx2px(this.$wuiUtils.queryParent.call(this, 'w-form').labelWidth)) + 'px'
			};
		},
		labelPositionComputed() {
			return {
				'--label-direction': this.labelPosition || this.$wuiUtils.queryParent.call(this, 'w-form').labelPosition
			};
		},
		errorMsgHeightComputed() {
			return {
				'--error-msg-height': uni.upx2px(this.errorMsgHeight) + 'px'
			};
		}
	}
};
</script>

<style lang="scss" scoped>
.wui-formItem {
	display: flex;
	align-items: center;
	.formItem-label {
		width: var(--label-width);
		text-align: var(--label-direction);
		flex-shrink: 0;
	}

	.formItem-slot {
		flex: 1;
		position: relative;

		.input-error-msg {
			height: var(--error-msg-height);
			position: absolute;
			color: red;
			display: flex;
			align-items: center;
			transition: all 0.3s;
			font-size: 24rpx;
		}

		.input-error-msg-show {
			transform: translateY(0);
			z-index: 50;
		}

		.input-error-msg-hidd {
			transform: translateY(calc(-1 * var(--error-msg-height)));
			z-index: -100;
		}

		.input-error-msg-block {
			transition: all 0.3s;
		}

		.input-error-msg-block-show {
			height: var(--error-msg-height);
		}

		.input-error-msg-block-hidd {
			height: 0;
		}
	}
}
</style>
